<template>
    <transition name="transition">
        <div :class="{ 'banner-big': true, 'zd': obj.shadow }" v-show="obj.flag">
            <div ref="banner" :class="{ 'banner': true, 'height100': !obj.shadow, }" @touchmove.stop
                @touchstart.stop="touchstart" @touchend.stop="touchend">
                <img class="banner-img" v-for="item, index in list" :src="item[src]" :key="index">
                <img class="banner-img" v-if="obj.smooth" :src="last_src">
            </div>
            <div v-if="obj.round" class="round">
                <span :class="{ 'default': index == obj.bannerindex }" @click="tab(index)"
                    v-for="item, index in list"></span>
            </div>
            <div @click="close" v-if="obj.shadow" class="zzc"></div>
            <div class="page" v-if="obj.page">
                {{ obj.bannerindex + 1 }} / {{ list.length }}
            </div>
        </div>
    </transition>
</template>
<script>
export default ({
    props: {
        list: {
            type: Array,
            default: [],
            required: true,
        },
        obj: {
            type: Object,
            default: {
                // src名
                src: 'img',
                // 小圆点
                round: true,
                // 页数
                page: false,
                // 遮罩层
                shadow: false,
                // 轮播模式
                auto: true,
                // 左右移动
                move: true,
                // 丝滑模式
                smooth: true,
                // 默认显示第几个
                bannerindex: 0,
                // 轮播速度
                text_speed: 2000,
                // 过渡速度
                speed: 0.5,
                // 是否默认显示 
                flag: true,
            },
            required: false,
        },
    },
    data() {
        return {
            src: 'img',
            last_src: '',
            startX: '',
            a: '',
            b: false,
            fangd: '',
        }
    },
    methods: {
        close() {
            this.obj.flag = false
        },
        tab(index) {
            this.obj.bannerindex = index
            this.$refs.banner.style = `left: ${-10 * this.obj.bannerindex}rem;transition: left ${this.obj.speed}s`
        },
        touchstart(e) {
            this.startX = e.changedTouches[0].pageX
        },
        touchend(e) {
            if (this.b) return
            if (!this.obj.move) return
            let moveEndX = e.changedTouches[0].pageX
            if (this.startX > moveEndX && this.startX - moveEndX > 50) {
                if (this.obj.bannerindex == this.list.length - 1) {
                    if (this.obj.smooth) {
                        this.obj.bannerindex++
                        this.$refs.banner.style = `left: ${-10 * this.obj.bannerindex}rem;transition: left ${this.obj.speed}s`
                        setTimeout(() => {
                            this.$refs.banner.style = `left:0rem;`
                        }, this.obj.speed * 1000);
                        this.obj.bannerindex = 0
                        return
                    } else {
                        this.$refs.banner.style = `left:0rem;transition: left ${this.obj.speed}s`
                        this.obj.bannerindex = 0
                        return
                    }
                }
                this.obj.bannerindex++
                this.$refs.banner.style = `left: ${-10 * this.obj.bannerindex}rem;transition: left ${this.obj.speed}s`
            } else if (this.startX < moveEndX && this.startX - moveEndX < -50) {
                if (this.obj.bannerindex == 0) {
                    this.obj.bannerindex = this.list.length - 1
                    this.$refs.banner.style = `left: ${-10 * this.obj.bannerindex}rem;transition: left ${this.obj.speed}s`
                    return
                }
                this.obj.bannerindex -= 1
                this.$refs.banner.style = `left: ${-10 * this.obj.bannerindex}rem;transition: left ${this.obj.speed}s`
            }
            this.b = true
            clearTimeout(this.fangd)
            this.fangd = setTimeout(() => {
                this.b = false
            }, 1500)
        },
        setfn() {
            this.a = setInterval(() => {
                if (this.obj.bannerindex == this.list.length - 1) {
                    if (this.obj.smooth) {
                        this.obj.bannerindex++
                        this.$refs.banner.style = `left: ${-10 * this.obj.bannerindex}rem;transition: left ${this.obj.speed}s`
                        setTimeout(() => {
                            this.$refs.banner.style = `left:0;;`
                        }, this.obj.speed * 1000);
                        this.obj.bannerindex = 0
                        return
                    } else {
                        this.$refs.banner.style = `left:0;;transition: left ${this.obj.speed}s`
                        this.obj.bannerindex = 0
                        return
                    }
                }
                this.obj.bannerindex++
                this.$refs.banner.style = `left: ${-10 * this.obj.bannerindex}rem;transition: left ${this.obj.speed}s`
            }, this.obj.text_speed)
        },
        clear() {
            clearInterval(this.a)
        }
    },
    mounted() {
        this.src = this.obj.src
        // 是否能左右移动
        this.obj.move = this.list.length == 1 ? false : this.obj.move
        // 默认显示第几个图片
        this.obj.bannerindex = this.list.length == 1 ? 0 : this.obj.bannerindex
        // 是否开启轮播
        this.obj.auto = this.list.length == 1 ? false : this.obj.auto
        // 是否开启丝滑模式
        this.obj.smooth = this.list.length == 1 ? false : this.obj.smooth
        // 判断过渡速度是否大于轮播速度
        if (this.obj.speed * 1000 >= this.obj.text_speed) return
        // 是否开启轮播
        if (!this.obj.auto) return
        // 是否默认显示开启轮播
        if (this.obj.flag) {
            this.setfn()
        }
    },
    updated() {
        if (this.list.length == 1) {
            this.last_src = ''
            this.obj.move = false
            return
        }
        this.last_src = this.list[0][this.src]
        if (this.obj.flag) {
            clearInterval(this.a)
            this.setfn()
        } else {
            this.clear()
        }
    },
    beforeDestroy() {
        this.clear()
    }
})
</script>
<style scoped lang="scss">
.transition-enter-active {
    animation: anm 0.5s;
}

.transition-leave-active {
    animation: anm 0.5s reverse;
}

@keyframes anm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.page {
    position: absolute;
    top: 0.42667rem;
    left: 50%;
    color: #fff;
    font-size: 0.37333rem;
    line-height: 0.53333rem;
    text-shadow: 0 0.02667rem 0.02667rem #323233;
    transform: translate(-50%, 0);
    z-index: 1000;
}

.zzc {
    width: 100%;
    height: 100%;
    background-color: #000000e6;
    position: absolute;
    top: 0;
    left: 0;
}

.banner-big .default {
    background-color: #fff !important;
    opacity: 1;
}

.banner-big {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.banner {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.banner-img {
    float: left;
    width: 10rem;
    height: 100%;
    object-fit: cover;
}

.round {
    position: absolute;
    bottom: 0.32rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1002;
}

.round span {
    width: 0.16rem;
    height: 0.16rem;
    background-color: #ebedf0;
    border-radius: 100%;
    opacity: .3;
    float: left;
    margin-right: 0.16rem;
}

.zd {
    z-index: 1001;
}

.zd .banner-big {
    z-index: 99;
}

.zd .zzc {
    z-index: 101;
}

.zd .banner {
    z-index: 102;
}

.height100 {
    height: 100%;
}
</style>